<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 22:04:49
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-13 13:31:14
 * @FilePath: \vue3_admin_template\project\src\components\PublicMap\Mapinit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxGl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { onMounted, ref } from 'vue'
import useMapStore from '@/store/modules/map'
import { baseMapLayer } from '@/utils/MapConfig.ts'
mapboxGl.accessToken = import.meta.env.VITE_MapBox_TOKEN
let useMap = useMapStore()
onMounted(() => {
  initMap()
})
const initMap = () => {
  const style = {
    container: 'map', // container id
    // style: "./static/map/map.json",
    style: mapStyle,
    // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M",
    // simple, //四维地球
    // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
    center: [108.4, 39.9],
    zoom: 3, // starting zoom
    minZoom: 1,
    epsg: 4326,
    doubleClickZoom: false,
  }
  const map = new mapboxGl.Map(style)
  useMap.setMapFn(map)
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#map {
  left: 0;
  top: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
html,
body {
  overflow: hidden;
}
/* 隐藏左下角图标 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
</style>
